<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>设备详情(简化版)</span>
        <el-button type="primary" size="small" @click="goBack" style="float: right;">返回</el-button>
      </div>

      <!-- 标签页 -->
      <el-tabs v-model="activeTab" type="card">
        <!-- 第一页 -->
        <el-tab-pane label="基本信息" name="first">
          <div class="detail-container">
            <!-- 第一行 -->
            <el-row :gutter="20" class="mb10">
              <el-col :span="8">
                <el-form-item label="IT设备编码">
                  <el-input v-model="detailData.deviceCode" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="设备类型">
                  <el-input v-model="detailData.typeName" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="型号">
                  <el-input v-model="detailData.model" disabled />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第二行 -->
            <el-row :gutter="20" class="mb10">
              <el-col :span="8">
                <el-form-item label="品牌">
                  <el-input v-model="detailData.brandName" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属部门">
                  <el-input v-model="detailData.deptName" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="责任人姓名">
                  <el-input v-model="detailData.userName" disabled />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'DeviceDetailSimple',
  components: {},
  data() {
    return {
      // 详情数据 - 直接使用模拟数据
      detailData: {
        deviceCode: 'DEV-2024-001',
        typeName: '笔记本电脑',
        model: 'ThinkPad X1',
        brandName: '联想',
        deptName: '技术部',
        userName: '张三'
      },
      // 活跃标签页
      activeTab: 'first'
    }
  },
  created() {
    console.log('简化版设备详情页面已加载')
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.detail-container {
  padding: 10px 0;
}
.mb10 {
  margin-bottom: 10px;
}
.el-form-item {
  margin-bottom: 15px;
}
.el-form-item__label {
  font-weight: 500;
  color: #606266;
}
.el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  color: #303133;
}
</style>